<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>考试系统</title>
</head>
<body>
  <!-- 开始界面 -->
  <div id="start-screen">
    <button class="start-exam-btn">开始考试</button>
  </div>
  <!-- 考试须知界面 -->
  <div id="instructions-screen">
    <h2>考试须知</h2>
    <hr class="separator">
    <div class="instruction-content">
      <p>1. 每一个题目有 <span style="color: #007bff;">15</span> 秒的答题时间。</p>
      <p>2. 一旦选择了答案，则无法取消/修改。</p>
      <p>3. 一旦倒计时结束，则不能选择关于本题的任何选项。</p>
      <p>4. 诚信考试，禁止抄袭。</p>
    </div>
    <hr class="separator">
    <div class="button-container">
      <button id="exit-exam-btn" class="btn btn-outline">退出考试</button>
      <button id="continue-exam-btn" class="btn btn-primary">继续考试</button>
    </div>
  </div>
  <!-- 答题界面 -->
  <div id="question-screen" style="display: none;">
    <div id="header">
      <h3>考试小应用</h3>
      <div id="timer-wrapper">
        <span>剩余时间</span>
        <span id="timer"></span>
      </div>
    </div>
    <!-- 时间线元素 -->
    <div id="timeline"></div>
    <div id="progress-wrapper">
      <span id="progress"></span>
    </div>
    <div id="question-container"></div>
    <button id="next-question-btn" class="btn btn-primary">下一题</button>
  </div>
  <!-- 结果界面 -->
  <div id="result-screen" style="display: none;">
    <img src="img/huangguan.png" alt="考试结果图片" id="result-image">
    <p id="score"></p>
    <p id="evaluation"></p>
    <div class="button-group">
      <button id="retake-exam-btn" class="btn btn-outline">重新考试</button>
      <button id="exit-result-exam-btn" class="btn btn-outline">退出考试</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>